{% extends "base.html" %}

{% block title %}编辑银行卡 - {{ card.cardID }}{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ url_for('admin_cards') }}">银行卡管理</a></li>
    <li class="breadcrumb-item active">编辑银行卡</li>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h4><i class="bi bi-credit-card"></i> 编辑银行卡信息</h4>
        </div>
        <div class="card-body">
            <form method="POST" id="editCardForm">
                <div class="row g-3">
                    <!-- 卡号 (只读) -->
                    <div class="col-md-6">
                        <label for="card_id" class="form-label">卡号</label>
                        <input type="text" class="form-control" id="card_id"
                               value="{{ card.cardID }}" readonly>
                    </div>

                    <!-- 客户选择 -->
                    <div class="col-md-6">
                        <label for="customer_id" class="form-label">客户</label>
                        <select class="form-select" id="customer_id" name="customer_id" required>
                            <option value="">-- 选择客户 --</option>
                            {% for customer in customers %}
                            <option value="{{ customer.customerID }}"
                                    {% if customer.customerID == card.customerID %}selected{% endif %}>
                                {{ customer.customerName }} (ID: {{ customer.customerID }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- 存款类型 -->
                    <div class="col-md-6">
                        <label for="saving_id" class="form-label">存款类型</label>
                        <select class="form-select" id="saving_id" name="saving_id" required>
                            <option value="">-- 选择存款类型 --</option>
                            {% for deposit in deposit_types %}
                            <option value="{{ deposit.savingID }}"
                                    {% if deposit.savingID == card.savingID %}selected{% endif %}>
                                {{ deposit.savingName }} (利率: {{ deposit.interestRate }}%)
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- 密码 -->
                    <div class="col-md-6">
                        <label for="password" class="form-label">密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password"
                                   name="password" value="{{ card.pass }}" required>
                            <button class="btn btn-outline-secondary" type="button"
                                    onclick="togglePassword()">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 余额 -->
                    <div class="col-md-6">
                        <label for="balance" class="form-label">余额</label>
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            <input type="number" step="0.01" class="form-control"
                                   id="balance" name="balance" value="{{ card.balance }}" required>
                        </div>
                    </div>

                    <!-- 挂失状态 -->
                    <div class="col-md-6">
                        <label for="is_report_loss" class="form-label">挂失状态</label>
                        <select class="form-select" id="is_report_loss" name="is_report_loss">
                            <option value="是" {% if card.IsReportLoss == '是' %}selected{% endif %}>
                                <span class="text-danger">已挂失</span>
                            </option>
                            <option value="否" {% if card.IsReportLoss == '否' %}selected{% endif %}>
                                <span class="text-success">正常</span>
                            </option>
                        </select>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-save"></i> 保存修改
                    </button>
                    <a href="{{ url_for('admin_cards') }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle"></i> 取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 切换密码可见性
function togglePassword() {
    const passwordField = document.getElementById('password');
    const toggleBtn = document.querySelector('[onclick="togglePassword()"] i');
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleBtn.classList.replace('bi-eye', 'bi-eye-slash');
    } else {
        passwordField.type = 'password';
        toggleBtn.classList.replace('bi-eye-slash', 'bi-eye');
    }
}

// 表单验证
document.getElementById('editCardForm').addEventListener('submit', function(e) {
    const balance = parseFloat(document.getElementById('balance').value);
    if (balance < 0) {
        e.preventDefault();
        alert('余额不能为负数');
        return false;
    }
    return true;
});
</script>
{% endblock %}